<template>
  <el-dialog  :visible.sync="isShow" center class="earnings-deduction" append-to-body width="60%" :before-close="handleClose">
    <el-table class="detail-table" :data="deduction" border max-height="350" style="width: 100%" ref="table">
      <el-table-column prop="deduction_price" show-overflow-tooltip label="金额" min-width="100">
        <template slot-scope="scope">
          <span class="font_danger">{{ scope.row.deduction_price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="原因" show-overflow-tooltip min-width="120"></el-table-column>
      <el-table-column prop="appeal" show-overflow-tooltip label="结果" min-width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.appeal">
            <span>{{ scope.row.appeal.status | deductionsAppeal }}</span>
          </template>
          <span v-else>未申诉</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="160">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            :disabled="scope.row.appeal != null"
            @click="deductionAppeal(scope.row)"
          >申诉
          <el-popover placement="bottom" title="申诉" width="200" trigger="hover" :disabled="scope.row.appeal != null">
            <span>您可以在结算7天内发起申诉；</span><br />
            <span>高级代理人每月有一次无理由申诉机会</span>
            <i class="el-icon-info orange ml10" slot="reference"></i>
          </el-popover>
          </el-button>
          <el-button type="primary"
            size="mini" 
            @click="toogleExpand(scope.row)" 
            v-if="scope.row.name == '案件撰写超时' || scope.row.name == '代理人答复超时' || scope.row.name == '上传上报文件超时' || scope.row.name == '发送定稿文件超时'"
            >查看详情</el-button>
            <!-- <el-button
            type="primary"
            size="mini"
            @click="toogleExpand(scope.row)"
            v-if="scope.row.timeout_days"
          >详情</el-button> -->
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- <template  v-if="props.row.name == '案件撰写超时'">
              <el-form-item label="案件撰写" class="form_item">
                <Timeline class="steps" style="padding: 10px 0 0 0;">
                  <template v-for="(item, index) in props.row.time"> 
                    <Timeline-item color="blue" :key="index">
                      <el-card>
                        <span class="process-time">{{ item.start }}</span>
                        <span class="process-time">第{{index+1}}次撰写开始时间</span><br />
                        <span class="process-time">{{ item.end }}</span>
                        <span class="process-time">第{{index+1}}次撰写结束时间</span><br />
                        <span class="write-time">撰写耗时：{{intervalTime(item.start,item.end)}}</span>
                      </el-card>
                    </Timeline-item>
                  </template>
                </Timeline>
              </el-form-item>
            </template> -->
            <!--  v-if="props.row.name == '案件撰写超时'" -->
            <template>
              <el-form-item :label="props.row.name" class="form_item">
                <Timeline class="steps" style="padding: 10px 0 0 0;">
                  <template v-for="(item, index) in props.row.time"> 
                    <Timeline-item color="blue" :key="index">
                      <el-card>
                        <el-timeline>
                          <el-timeline-item
                            v-for="(item1,index1) in item"
                            :key="index1"
                            color="#2d8cf0">
                            <el-card>
                              <span class="process-time">{{ item1 }}</span>
                              <span class="process-time ml10" v-if="index1 == 'start'">开始时间</span>
                              <span class="process-time ml10" v-if="index1 == 'end'">结束时间</span>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                        <span class="write-time">耗时：{{intervalTime(item.start,item.end)}}</span>
                      </el-card>
                    </Timeline-item>
                  </template>
                </Timeline>
              </el-form-item>
            </template>
            <!-- <template  v-if="props.row.name == '发送定稿文件超时'">
              <el-form-item :label="props.row.name" class="form_item">
                <Timeline class="steps" style="padding: 10px 0 0 0;">
                  <template v-for="(item, index) in props.row.time"> 
                    <Timeline-item color="blue" :key="index">
                      <el-card>
                        <el-timeline>
                          <el-timeline-item
                            v-for="(item1,index1) in item"
                            :key="index1"
                            color="#2d8cf0">
                            <el-card>
                              <span class="process-time">{{ item1 }}</span>
                              <span class="process-time ml10" v-if="index1 == 'start'">定稿开始时间</span>
                              <span class="process-time ml10" v-if="index1 == 'end'">定稿结束时间</span>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                        <span class="write-time">定稿耗时：{{intervalTime(item.start,item.end)}}</span>
                      </el-card>
                    </Timeline-item>
                  </template>
                </Timeline>
              </el-form-item>
            </template>
            <template  v-if="props.row.name == '上传上报文件超时'">
              <el-form-item :label="props.row.name" class="form_item">
                <Timeline class="steps" style="padding: 10px 0 0 0;">
                  <template v-for="(item, index) in props.row.time"> 
                    <Timeline-item color="blue" :key="index">
                      <el-card>
                        <el-timeline>
                          <el-timeline-item
                            v-for="(item1,index1) in item"
                            :key="index1"
                            color="#2d8cf0">
                            <el-card>
                              <span class="process-time">{{ item1 }}</span>
                              <span class="process-time ml10" v-if="index1 == 'start'">上传开始时间</span>
                              <span class="process-time ml10" v-if="index1 == 'end'">上传结束时间</span>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                        <span class="write-time">上传耗时：{{intervalTime(item.start,item.end)}}</span>
                      </el-card>
                    </Timeline-item>
                  </template>
                </Timeline>
              </el-form-item>
            </template> -->
            <el-form-item label="超时天数：" class="form_item">
                <span class="write-time">{{props.row.timeout_days}}天&emsp;&emsp;</span>
                <span v-if="props.row.name == '案件撰写超时' || props.row.name == '代理人答复超时'">超时扣费金额：<span class="over-time">20元/天</span></span>
                <span v-else>超时扣费金额：<span class="over-time">50元/天</span></span>
              </el-form-item>
            <el-form-item label="扣费金额：" class="form_item">
              <span class="write-time">{{props.row.deduction_price}}元
                <el-popover placement="right" title="超时扣费规则" width="500" trigger="hover">
                  <span class="prompt-time">1.案件撰写/案件答复/补正时间：</span><br />
                  <span>&emsp;1.1.自接案件撰写时间为<span class="write-time">25</span>天，流程分配订单撰写时间为<span class="write-time">55</span>天，超出天数按每天
                  <span class="over-time">20</span>元扣费。代理人师徒身份为Vip,各有<span class="over-time">5</span>天额外撰写时间。</span><br />
                  <span>&emsp;1.2.案件答复/补正时间为<span class="write-time">20</span>天，超出天数按每天
                  <span class="over-time">20</span>元扣费。代理人身份为师傅且为Vip,有<span class="over-time">5</span>天额外案件答复/补正时间。</span><br />
                  <span class="prompt-time">2.上传上报文件：</span><br />
                  <span>&emsp;案件上传上报文件时间为<span class="write-time">3</span>天，vip代理人发送定稿文件时间加<span class="over-time">1</span>天，超出天数按每天
                  <span class="over-time">50</span>元扣费。</span><br />
                  <span class="prompt-time">3.发送定稿文件：</span><br />
                  <span>&emsp;案件发送定稿文件时间为<span class="write-time">3</span>天，vip代理人发送定稿文件时间加<span class="over-time">1</span>天，超出天数按每天
                  <span class="over-time">50</span>元扣费。</span><br />
                  <i class="el-icon-info orange ml10" slot="reference"></i>
                </el-popover>
              </span>
            </el-form-item>
            
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <deductionAppeal ref="deductionAppeal" @refresh="refresh"></deductionAppeal>
  </el-dialog>
    
</template>

<script>
import deductionAppeal from "./deduction-appeal";
export default {
  components: {
    deductionAppeal
  },
  data() {
    return {
      exempt_review:false,
      deduction: [],
      detail: null,
      settlement_id: null,
      isShow: false
    };
  },
  // computed:{
  //   deduction:function(){
  //     return this.deduction
  //   }
  // },
  methods: {
    handleClose () {
      this.deduction = []
      this.detail = null
      this.isShow = false
    },
    // 计算时间间隔
    intervalTime(startTime,endTime){
      var date1 = new Date(startTime); //开始时间
        var date2 = new Date(endTime); //结束时间
        var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
        //计算出相差天数
        var days = (date3 / (24 * 3600 * 1000)).toFixed(1)
        //计算出小时数

        var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = (leave1 / (3600 * 1000)).toFixed(1)
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = (leave2 / (60 * 1000)).toFixed(1)

        //计算相差秒数

        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);
        // return days + "天 " + hours + "小时 " + minutes + "分钟" + seconds + " 秒";

        if (days > 0) {
            return `${days} 天`
        } else {
            if (hours > 0) {
                return `${hours} 时`
            } else {
                if(minutes > 1) {
                    return `${minutes} 分`
                }else {
                    return '少于1分钟'
                }
            }
        }
    },
    toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    },
    deductionAppeal(row) {
      if(this.exempt_review){
        this.$confirm('您有一次无理由申诉机会, 是否使用?', '提示', {
          confirmButtonText: '使用',
          cancelButtonText: '取消',
          // type: 'warning'
        }).then(() => {
          this.appeal_out(row.id)
        }).catch(() => {
           this.$refs['deductionAppeal'].show(row)       
        });
        
      }else{
        this.$refs['deductionAppeal'].show(row)
      }
    },
    // 无理由申诉
    appeal_out(id){
      let params = {
        appeal_id:id,
        type: 'App\\Models\\Deduction',
        exempt_review:1
      }
      this.$axios
      .post("/api/appeals",params)
      .then(res => {
        if (res.data.code == 200) {
          this.$alert('申诉申请成功', "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "success",
            callback: action => {}
          });
        }else{
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "success",
            callback: action => {}
          });
        }
      })
      .catch(err => {
        this.$message.error(err);
      });
    },
    refresh() {
      this.isShow = false;
      this.$emit("refresh");
    },
    show(data) {
      this.settlement_id = data.id;
      this.getInfo();
      this.isShow = true;
    },
    getInfo() {
      this.$axios.get(`api/settlement/${this.settlement_id}`).then(res => {
        if (res.data.code == 200) {
          this.exempt_review = res.data.data.exempt_review
          this.detail = res.data.data;
          if (this.detail.final) {
            this.order_number = this.detail.final.order_number;
            this.deduction = res.data.data.final.order.deduction
          } else if (this.detail.order) {
            this.order_number = this.detail.order_number;
            this.deduction = res.data.data.order.deduction
          }
          if (this.deduction) {
            for(let i = 0;i < this.deduction.length;i++){
              if(this.deduction[i].name == '案件撰写超时' || this.deduction[i].name == '代理人答复超时'){
                this.deduction[i].timeout_days = this.deduction[i].deduction_price / 20
              } else{
                this.deduction[i].timeout_days = this.deduction[i].deduction_price / 50
              }
            }
            // this.toogleExpand(this.deduction[0])
          } else {
            this.$alert("该结算暂无扣款详情！", "提示", {
              confirmButtonText: "确定",
              callback: action => {}
            });
          }
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "warning",
            callback: action => {}
          });
        }
      });
    }
  }
};
</script>

<style>
.el-table__expanded-cell[class*=cell]{
  padding: 10px;
}

.process-time {
  color: #b4b4b4;
  font-size: 13px;
}
.ivu-timeline-item-content {
  font-size: 15px !important; 
  top: -15px;
}
.ivu-timeline-item-tail {
  border-left: 2px solid rgba(36, 157, 255, 1);
}
.ivu-timeline-item-head-blue {
  margin-left: 3px;
  width: 8px;
  height: 8px;
  background: #2d8cf0;
}
.el-timeline-item__tail{
  border-left: 2px solid rgba(36, 157, 255, 1);
}
.el-timeline-item__node--normal {
  left: 1px;
  width: 8px;
  height: 8px;
}
.prompt-time{
  color: #8B814C;
  font-size: 14px;
}
.write-time{
  color: #FF0000;
  font-size: 13px;
}
.over-time{
  color: #EE7600
}
.form_item{
  width: 100%;
  margin-bottom: 5px;
}
.el-card__body{
  padding: 10px;
}
</style>